
<template>
  <div class="box">
    <Card>
      <span slot="title">账号列表</span>
      <div slot="title1">
        <!-- 引入表格 -->
        <div class="box3">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="cha"
          >
            <el-table-column type="selection" width="100"> </el-table-column>

            <el-table-column label="账号" width="120">
              <template slot-scope="scope">{{ scope.row.account }}</template>
            </el-table-column>

            <el-table-column label="用户组" width="300">
              <template slot-scope="scope">{{ scope.row.userGroup }}</template>
            </el-table-column>

            <el-table-column label="创建时间" width="300">
              <template slot-scope="scope">{{ scope.row.ctime }}</template>
            </el-table-column>
            <!-- 点击删除和编辑单个  点击编辑的时候套弹出一框-->
            <el-table-column label="操作" width="300">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 这是弹出的模态框 -->

        <el-dialog title="修改信息" :visible.sync="isshow">
          <el-form :model="form">
            <el-form-item label="账号" label-width="100px">
              <div class="box11">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="用户组" label-width="100px">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="普通管理员" value="普通管理员"></el-option>
                <el-option label="超级管理员" value="超级管理员"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="isshow = false">取 消</el-button>
            <el-button type="primary" @click="abc">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 取消选择 -->

        <!-- 引入分业 -->
        <div class="block" style="margin-top: 20px">
          <el-pagination
            @size-change="hal"
            @current-change="had"
            :current-page="curpage"
            :page-size="current"
            :page-sizes="[1, 10, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>

        <!-- 按钮 -->
        <div style="margin-top: 20px">
          <el-button type="danger" @click="acc1()">批量删除</el-button>
          <el-button type="primary" @click="acc2()">取消选择</el-button>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
import Card from "@/components/Card.vue";
//引入接口apicl_js
import { apipro_js } from "@/utils/api.js";
import { apire_js } from "@/utils/api.js";
//批量删除
import { apicl_js } from "@/utils/api.js";
//引入moment
import moment from "moment";
//引入修改账号的接口
import { apixg_js } from "@/utils/api.js";

export default {
  components: {
    Card,
  },
  data() {
    return {
      form: {
        name: "",
        region: "",
        id:'',
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      data: "",

      //这是页数
      curpage: 1,
      current: 1,
      total: 500,
      //改变框的选中状态
      isshow: false,
      tableData: [],
      async getlist() {
        let res = await apipro_js({
          currentPage: this.curpage,
          pageSize: this.current,
        });
        this.tableData = res.data;
        this.total = res.total;
        //拿到每个事件然后更改
        res.data.forEach(
          (item) =>
            (item.ctime = moment(item.ctime).format("YYYY -MM -DD, hh:mm:ss a"))
        );

        //页数判断  如果这个页面没有值了  那么它就减少一页
        if (!res.data.length) {
          this.curpage--;
          //重绘试图
          this.getlist();
        }
      },

      //定义一个变量来保存获得的列表
    };
  },
  //创建之后就立即加载

  created() {
    this.getlist();
  },
  methods: {
    //这是条数的改变
    hal(val) {
      console.log(`每页 ${val} 条`);
      //重新绘制 把当前的页数赋值给上面的页数
      this.current = val;
      this.getlist();

    },
    //这是页数
    had(val) {
      console.log(`当前页: ${val}`);
      //重新绘制 把当前的值赋值给上面的页数
      this.curpage = val;
      //然后重新渲染
      this.getlist();
    },
    //这是input改变的状态
    cha(row) {
      //拿到每条数据的详细信息
      console.log(row);
      this.newarr = row;
    },

    //这是批量删除
    acc1() {
      //已经获取到它的索引  可以通过id来批量删除
      let remove = this.newarr.map((item) => item.id);
      //这是弹窗

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          //批量删除接口
          await apicl_js({ ids: JSON.stringify(remove) });
          this.getlist();
         
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //这是取消选择 点击全不选

    acc2(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //这是删除单条 就是删除他自身的id
    handleDelete(index, row) {
      //删除弹窗
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          //删除接口
          let res = await apire_js({ id: row.id });
          //删除之后渲染
          this.getlist();
        })
        .catch(() => {

        });
    },
    //这是编辑  可以弹出对应的模态框 然后获取到当前的值
    handleEdit(row) {
      //修改账号

      this.isshow = true;
      this.form.name = row.account;
      this.form.region = row.userGroup;
      this.form.id = row.id

    },
    //这是弹窗  再弹窗里面发送ajax

    async abc(){
      
                  await apixg_js({
        id: this.form.id,
        account: this.form.name,
        userGroup: this.form.region,

      });
      this.getlist()
      this.isshow = false
    }
  },
};
</script>


<style lang="less" scoped>
.box11 {
  width: 200px;
}
//为了避免溢出  所以设置溢出产生滚动条
.box3 {
  height: 500px;
  overflow: scroll;
}
</style>